<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app='appModule'>
<head>
  <title>Accordion</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <link href="accordion.css" rel='stylesheet'>
</head>
  <body ng-controller='SomeController' >
    <accordion>
      <expander class='expander'
                ng-repeat='expander in expanders'
                expander-title='expander.title'>
        {{expander.text}}
      </expander>
    </accordion>
  </body>

<script>
  function SomeController($scope) {
    $scope.expanders = [
      {title: 'Click me to expand',
        text: 'Hi there folks, I am the content that was hidden but is now shown.'},
      {title: 'Click this',
        text: 'I am even better text than you have seen previously'},
      {title: 'No, click me!',
        text: 'I am text that should be seen before seeing other texts'}
    ];
  }

  var appModule = angular.module('appModule', []);

  appModule.directive('accordion', function() {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      template: '<div ng-transclude></div>',
      controller: function() {
        var expanders = [];

        this.gotOpened = function(selectedExpander) {
          angular.forEach(expanders, function(expander) {
            if (selectedExpander != expander) {
              expander.showMe = false;
            }
          });
        }

        this.addExpander = function(expander) {
          expanders.push(expander);
        }
      }
    }
  });
  appModule.directive('expander', function(){
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      require: '^?accordion',
      scope: { title:'=expanderTitle' },
      template: '<div>' +
          '<div class="title" ng-click="toggle()">{{title}}</div>' +
          '<div class="body" ng-show="showMe" ng-transclude></div>' +
          '</div>',
      link: function(scope, element, attrs, accordionController) {
        scope.showMe = false;
        accordionController.addExpander(scope);

        scope.toggle = function toggle() {
          scope.showMe = !scope.showMe;
          accordionController.gotOpened(scope);
        }
      }
    }
  });
</script>
</html>
